<!-- 这是任务管理表格 -->
<template>
    <div id="center-info" v-show="this.str === '任务管理'">
                <el-table
                    border
                    :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    style="width: 100%;font-size: 10px;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                    <el-table-column
                    prop="task_name"
                    width="150px"
                    label="任务名称">
                    </el-table-column>

                    <el-table-column
                    prop="start_time"
                    label="开始时间"
                    sortable
                    width="150px">
                    </el-table-column>

                    <el-table-column
                    prop="end_time"
                    label="结束时间"
                    sortable
                    width="150px">
                    </el-table-column>

                    <el-table-column
                    prop="research_obj"
                    label="调研对象"
                    width="90">
                    </el-table-column>

                  <el-table-column
                    label="状态"
                    prop="state"
                    :formatter="formatState"
                    width="90"
                  >
                  </el-table-column>

                    <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                            <el-button type ="text" size="small" v-if="scope.row.state != '3' && scope.row.state != '4'" @click="updateTask(scope.row.task_id)">编辑</el-button>
                            <el-button type ="text" size="small" @click="runlookinfo(scope.row.questionnaire,scope.row.task_name)">查看问卷</el-button>
                            <el-button type ="text" size="small" v-if="scope.row.state === '2'">取消</el-button>
                            <el-button type ="text" size="small" v-if="scope.row.state != '2'" @click="open(scope.row.task_id)">删除</el-button>
                            <el-button type ="text" size="small" @click="runresultinfo(scope.row)">调研结果</el-button>
                            <el-button type ="text" size="small" @click="dialogVisible = true">分享</el-button>
                    </template>
                    </el-table-column>
                </el-table>

      <div style="margin: 10px;text-align: center">
        <el-pagination
          :currentPage="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog title="修改任务" :visible.sync="dialogFormVisible" top="18vh">
        <el-form :model="form" style="font-size:12px" label-width="100px" class="demo-ruleForm">
          <el-form-item label="任务名称" prop="name">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="form.task_name"
              maxlength="50"
              width ="100% !important"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="开始时间" prop="starttime">
            <el-date-picker
              v-model="form.start_time"
              type="datetime"
              style="width: 100%"
              :placeholder="form.start_time"
              value-format="yyyy-MM-dd HH:mm:SS"
            />
          </el-form-item>

          <el-form-item label="结束时间" prop="endtime">
            <el-date-picker
              v-model="form.end_time"
              type="datetime"
              style="width: 100%"
              :placeholder="form.end_time"
              value-format="yyyy-MM-dd HH:mm:SS"
            />
          </el-form-item>

          <el-form-item label="调研对象" prop="type">
            <el-select v-model="form.research_obj" clearable  placeholder="请选择调研对象" style="width:100%">
              <el-option
                v-for="item in options1"
                :key="item.label"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="调研问卷" prop="type">
            <el-select v-model="form.questionnaire" clearable  placeholder="请选择调研问卷" style="width:100%">
              <el-option
                v-for="item in options2"
                :key="item.quest_invest_id"
                :label="item.quest_name"
                :value="item.quest_invest_id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="btn2">确 定</el-button>
        </div>
      </el-dialog>


            <el-dialog
                style="font-size: 12px"
                :visible.sync="dialogVisible"
                width="40%"
                top="25vh"
                :before-close="handleClose">

                <el-tabs v-model="activeName">
                    <el-tab-pane label="问卷分享" name="first">
                        <p>
                            复制问卷链接，可配置成单独微应用、消息等使用，适合用户已登陆平台或应用的场景
                        </p>
                        <el-input placeholder="请输入内容" v-model="input1">
                            <template slot="prepend">链接</template>
                        </el-input>
                        <div style="margin: 20px 10px">
                            <el-button :type="type" @click="copy()" >{{copymesg}}</el-button>
                            <el-button plain>取消</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="问卷统计分享" name="second">
                        <p>
                            复制问卷链接，可配置成单独微应用、消息等使用，适合用户已登陆平台或应用的场景
                        </p>
                        <el-input placeholder="请输入内容" v-model="input1">
                            <template slot="prepend">链接</template>
                        </el-input>
                        <div style="margin: 20px 10px">
                            <el-button :type="type" @click="copy()" >{{copymesg}}</el-button>
                            <el-button plain>取消</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="推送消息" name="third">
                         <p>
                            复制问卷链接，可配置成单独微应用、消息等使用，适合用户已登陆平台或应用的场景
                        </p>
                        <div style="margin: 20px 10px">
                            <el-button type="primary">进入消息平台</el-button>
                            <el-button plain>取消</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>

            </el-dialog>

            </div>
</template>
<script>
import request from "../../../utils/request";

export default {
    props:[
        "str",
        "lists1",
        "text"
    ],
    created() {
        this.select();
    },
    computed:{
        lists2:function(){
            return this.lists1
        },
        tableData1:function(){
            var lists = this.lists;
            if(this.search==""){
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.total = lists.length
                return lists;
            }
            var search = this.search.trim().toLowerCase();
            lists = lists.filter(function(ele){
                if(ele.task_name.toLowerCase().indexOf(search) != -1){
                    return ele;
                }
            });
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.total = lists.length
            return lists;
        },
    },
    data() {
        return {
            num:0,
            lists:{},
            search:'',
            // search: this.text,
            // eslint-disable-next-line vue/no-dupe-keys
            lists2:{},
            // eslint-disable-next-line vue/no-dupe-keys
            currentPage:1,
            total:10,
            pageSize:10,
            form:{},
            research_obj:'',
            state:'',
            options1: [
                {value: '选项1',
                    label: '学生',},
                {
                    value: '选项2',
                    label: '教职工',
                }],
            options2: {},
            tableData: [{
                name:'2020届毕业生就业意向调研',
                startdate:'2020-02-20',
                overdate:'2020-03-20',
                object:'学生',
                state:'待发布',
            }, {
                name:'毕业生岗位变动调研',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'教职工',
                state:'进行中',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-03',
                object:'学生',
                state:'进行中',
            }, {
                name:'2020届毕业生就业意向调研',
                startdate:'2020-02-20',
                overdate:'2020-03-20',
                object:'学生',
                state:'已结束',
            },{
                name:'毕业生岗位变动调研',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'教职工',
                state:'已取消',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'学生',
                state:'进行中',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'学生',
                state:'进行中',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'学生',
                state:'进行中',
            }],
            dialogVisible: false,
            dialogFormVisible: false,
            activeName: 'first',
            input1 : "https://biaodan100.com/r/5e37872475a03c7883f44843",
            type : "primary",
            copymesg : "复制链接"
        }
    },
    mounted() {
        this.lists2 = this.lists1
        this.search = this.text
    },
    watch:{
        text:{
        // 监听数据发生变化的处理函数
            handler(newV){
                this.search = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
                this.select()
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        },
        lists1:{
        // 监听数据发生变化的处理函数
            handler(newV){
                this.lists2 = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
                this.research_obj = this.lists2.research_obj
                this.state = this.lists2.state
                this.select()
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        }
    },
    methods: {
        select(){
            if (this.research_obj != null && this.research_obj != ''){
                if (this.state != null && this.state != ''){
                    request.post("/task/AllTask?research_obj="+this.research_obj+"&state="+this.state).then(res => {
                        this.lists = res;
                        this.total = this.lists.length
                    })
                }else {
                    request.post("/task/AllTask1?research_obj="+this.research_obj).then(res => {
                        this.lists = res;
                        this.total = this.lists.length
                    })
                }
            }else {
                if (this.state != null && this.state != ''){
                    request.post("/task/AllTask1?state="+this.state).then(res => {
                        this.lists = res;
                        this.total = this.lists.length
                    })
                }else {
                    request.post("/task/findAllTask").then(res => {
                        this.lists = res;
                        this.total = this.lists.length
                    })
                }
            }
            request.post("/questinvest/selectQuestinvest").then(res => {
                this.options2 = res;
            })
        },
        updateTask(task_id){
            request.post("/task/findAllTask1?task_id="+task_id).then(res => {
                this.form = res;
            })
            this.dialogFormVisible = true
        },
        btn2(){
            request.post("/task/updateTask",this.form).then(res => {
                var st = res
                if (st){ //更新
                    this.$message({
                        type: "success",
                        message: "修改成功"
                    })
                }else { //插入
                    this.$message({
                        type:"error",
                        message: "修改失败"
                    })
                }
                this.select()
            })
            this.dialogFormVisible = false
        },
        // formatter(row, column) {
        //     return row.start_time;
        // },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        open(task_id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post("/task/deleteTask?task_id="+task_id).then(res => {
                    var st = res
                    if (st){ //更新
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    }else { //插入
                        this.$message({
                            type:"error",
                            message: "删除失败"
                        })
                    }
                    this.select()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        copy(){
            this.copymesg = "复制成功";
            this.type = "success"

        },
        runlookinfo(questionnaire,task_name){
            this.$router.push({path:"/rwlook",query: { id: "查看" ,lookername : task_name ,questionnaire : questionnaire}})
        },
        runresultinfo(val){
            this.$router.push({path:"/ResearchResult",query: { id: "调研结果" ,
                resultname : val.task_name,
                quest_invest_id:val.questionnaire,
                task_id:val.task_id
            }})
        },
        formatState: function (row, column, cellValue) {
            if (cellValue == "0"){
                return '待发布';
            }else if (cellValue == "1"){
                return '进行中';
            }else if (cellValue == "2"){
                return '已结束';
            }else {
                return '已取消';
            }
        },
        handleSizeChange(pageSize){
            this.pageSize = pageSize
            this.select(this.num)
        },
        handleCurrentChange(currentPage){
            this.currentPage = currentPage
            this.select(this.num)
        },
    },
}
</script>
<style scoped>
</style>
